<template>
  <div class="discover-wrap">
    <div class="discover_logo_wrap">
      <img width="166" height="32" src="@/assets/img/discover_logo.png">
      <p class="discover_logo_text">一个帮助你发现数据奥秘的BI数据系统</p>
    </div>
    <div class="discover_item_wrap">
      <div class="discover_item">
        <img width="96" height="96" src="@/assets/img/discover_1.png">
        <p class="discover_item_title">自定义图表</p>
        <p class="discover_item_text">自由组合不同业务层数据构建图表</p>
      </div>
      <div class="discover_item">
        <img width="96" height="96" src="@/assets/img/discover_2.png">
        <p class="discover_item_title">字段自定义</p>
        <p class="discover_item_text">不同字段之间支持组合计算，获取关键信息</p>
      </div>
      <div class="discover_item">
        <img width="96" height="96" src="@/assets/img/discover_3.png">
        <p class="discover_item_title">秒级响应</p>
        <p class="discover_item_text">千万级数据量秒级响应，实时查看数据</p>
      </div>
    </div>
    <div class="discover_item_wrap">
      <div class="discover_item">
        <img width="96" height="96" src="@/assets/img/discover_4.png">
        <p class="discover_item_title">自动转发</p>
        <p class="discover_item_text">日报、周报、月报数据邮件自动转发</p>
      </div>
      <div class="discover_item">
        <img width="96" height="96" src="@/assets/img/discover_5.png">
        <p class="discover_item_title">海量图表库</p>
        <p class="discover_item_text">数十种图表形式，适应不同场景，提升数据分析效率</p>
      </div>
      <div class="discover_item">
        <img width="96" height="96" src="@/assets/img/discover_6.png">
        <p class="discover_item_title">数据安全管理</p>
        <p class="discover_item_text">数据权限、操作权限快速管理</p>
      </div>
    </div>
    <div class="btn-wrap">
      <!--{{$store.state.session.sessionId}}-->
      <div>
        <el-button v-if="progressBtnState" :disabled="loading" type="primary" class="primary_btn" @click="searchProgress">查询进度</el-button>
        <p v-if="btnState === 'notPrepared' && searching" class="tip">数据尚未准备，请联系管理员！( {{count}} s )</p>
        <p v-if="btnState === 'preparation' && searching" class="tip">数据准备中...( {{count}} s )</p>
        <p v-if="btnState === 'accountStop'" class="tip">未开通此功能或已到期，请联系管理员！</p>
        <el-button v-if="btnState === 'success'" type="primary" class="primary_btn" @click="goDiscover">立即跳转</el-button>
      </div>
      <div>
        <!-- <el-button type="text" class="primary_btn" @click="goDiscoverDemo">体验demo</el-button> -->
        <p class="line-delete">该产品将不再售卖，敬请谅解</p>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'discover',
    data () {
      return {
        btnState: 'notPrepared',
        loading: false,    //   请求过程中
        searching: false,  //   60秒倒计时
        count: 60,
        timer: null,
        demoUrl: '',
        demoSid: '',
        url: ''
      }
    },
    methods: {
      searchProgress () {
        this.loading = true
        this.$store.dispatch('getBiReportStatus', {}).then((res) => {
          this.loading = false
          this.btnState = res.data.type
          if (this.btnState === 'notPrepared' || this.btnState === 'preparation') {
            this.searching = true
            this.timer = window.setInterval(this.refreshCount, 1000)
          }
        })
      },
      refreshCount () {
        this.count--
        if (this.count <= 0) {
          this.searching = false
          this.count = 60
          window.clearInterval(this.timer)
          this.timer = null
        }
      },
      goDiscoverDemo () {
        this.$store.dispatch('redirectToFixationDemo', {}).then((res) => {
          if (res.success) {
            let biDemoUrl = this.demoUrl + "/#/login?sessionId=" + this.demoSid
            window.open(biDemoUrl)
          }
        })
      },
      goDiscover () {
        let biUrl = this.url + "/#/login?sessionId=" + this.$store.state.session.sessionId
        window.open(biUrl)
        // v22.2 增加BI跳转埋点
        const account = this.$store.state.session.account.account
        window._hmt && window._hmt.push(['_trackEvent', 'discover', 'FE-跳转discover', account])
      }
    },
    computed: {
      progressBtnState () {
        return (this.btnState === 'notPrepared' || this.btnState === 'preparation') && !this.searching
      }
    },
    beforeMount () {
      this.$store.dispatch('getBiReportStatus', {}).then((res) => {
        this.searching = false
        this.btnState = res.data.type
        this.url = res.data.url
        this.demoUrl = res.data.demoUrl
        this.demoSid = res.data.demoSid
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../assets/common.styl';
  .discover-wrap
    padding 0px 100px
    height calc(100vh - 53px)
    overflow-y auto
  .discover_logo_wrap
    text-align center
    margin-bottom 46px
    padding-top 40px
    .discover_logo_text
      font-size 16px
      color #424242
      margin-top 14px
  .discover_item_wrap
    width 100%
    height 180px
    margin-bottom 26px
    .discover_item
      width 33%
      height 180px
      text-align center
      float left
      .discover_item_title
        font-size 14px
        color $cf-gray2
        margin 8px 0 4px
      .discover_item_text
        font-size 12px
        color $cf-gray3
  .btn-wrap
    text-align center
    .btn
      display block
  .tip
    color $cf-gray5
    font-size 14px
.line-delete
  margin 20px 0 
</style>
